import { Modal } from "antd";
import "@/style/themeModal.scss"
import { globalConfig } from "@/globalConfig";
import { useDispatch, useSelector } from "react-redux";
import { CheckCircleFilled } from "@ant-design/icons";
import { setColorPrimary } from "@/store/slices/theme";
const ThemeModal = (props: any) => {
    const dispatch = useDispatch()
    const theme = useSelector((state: any) => state.theme)

    const { close } = props
    const { customColorPrimarys } = globalConfig
    return (
        <Modal title="主题色" closable={true} open={true} onCancel={close} footer={null} width={500}>
            <div className="colorBox">

                {customColorPrimarys.map((item: any) => {
                    return (
                        <div className="colorItem" style={{ backgroundColor: item }} onClick={() => { dispatch(setColorPrimary(item)); close() }}>
                            {theme.colorPrimary === item &&
                                <CheckCircleFilled style={{ color: '#fff', fontSize: 25 }} />
                            }

                        </div>
                    )
                })}
            </div>
        </Modal>
    );
};

export default ThemeModal;